@import '../public/less/variables.less';
#app {
    .detail {
        padding-top: 20*@base_size;
        padding-bottom: 20px;
        position: relative;
        >ol {
            background-color: white;
        }
        .title {
            color: @base_color;
            font-size: 20*@base_size;
            font-weight: bold;
            padding: 5px;
        }
        
        .photo {
            padding: 10*@base_size 0 40*@base_size 0;
            img {
                max-width: 100%;
            }
        }
        .content {
            text-indent: 2em;
            font-size: 14*@base_size;
            line-height: 26*@base_size;
            overflow: hidden;
            >div:nth-of-type(1){
                padding-bottom: 20*@base_size;
            }
            .time {
                font-size: 15*@base_size;
                color: @color_line;
                padding: 5px;
                text-indent: 0;
                span {
                    margin-right: 10px;
                }
            }
            .icons {
                margin-right: 5px;
                float: right;
                >li {
                    float: left;
                    margin-right: 5px;
                    img {
                        margin-right: 5px;
                    }
                }
            }
            span{
                color: black !important;
            }
        }
        //回复
        .my_back {
            margin-top: 20px;
            .my_tips {
                position: relative;
                .unlogin {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    border: 1px solid @base_color;
                    padding: 5px 10px;
                    font-size: 20*@base_size;
                    letter-spacing: 2px;
                    >div {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        left: 0;
                        top: 0;
                    }
                }
            }
            .submit button {
                width: auto;
                float: right;
                margin-right: 10px;
            }
        }        
    }
    //回复列表
        .list {
            .title {
                font-size: 16*@base_size;
                color: @base_color;
                margin-bottom: 20*@base_size;
                span {
                    color: @base_color_2;
                }
            }
            .back_list {
                @right_height: 95;
                @padding_left: 96;
                @padding_top: 20;
                @img_width: 60;
                .one_back {
                    margin-bottom: 10*@base_size;
                    >div:nth-of-type(1){
                        padding: @padding_top*@base_size 0 @padding_top*@base_size @padding_left*@base_size;
                        position: relative;
                        background-color: #fafafa;                        
                        .icon {
                            position: absolute;
                            left: 0;
                            top: @padding_top*@base_size;
                            height: @img_width*@base_size;
                            width: @padding_left*@base_size;
                            padding: 0 (@padding_left/2-@img_width/2)*@base_size;
                            img {
                                width: 100%;
                                height: 100%;
                                border-radius: 50%;
                            }
                        }
                        //右侧
                        .right {
                            min-height: @right_height*@base_size;
                            align-items: flex-start;
                            >span:nth-of-type(1) {
                                font-size: 16*@base_size;
                                color: @base_color;
                            }
                            >span:nth-of-type(2) {
                                font-weight: bold;
                            }
                            >div{
                                padding-top: 10*@base_size;
                            }
                        }
                        //回复
                        .icons {
                            position: absolute;
                            right: 40px;
                            bottom: 20px;
                            font-size: 16*@base_size;
                            img {
                                //                          width: 25*@base_size;
                                vertical-align: middle;
                                margin-right: 5px;
                            }
                        }
                    }                    
                    //回复框
                    .back_other {
                        position: relative;
                        display: none;
                        width: 100%;
                        button {
                            position: absolute;
                            right: 20px;
                            top: 50%;
                            transform: translateY(-50%);
                        }
                    }
                }
            }
        }
        .back_detail {
            position: absolute;
            padding-top: 40*@base_size;
            left: 50%;
            transform: translateX(-50%);
            top: 100*@base_size;
            width: 1200px;
            min-height: 1000px;
            background-color: white;
            z-index: 10000;
            .back_list {
                width: 100%;
            }
            .title{
                margin-left: 20*@base_size;
            }
            .back_list_btn{
                position: absolute;
                right: 20*@base_size;
                top: 30*@base_size;
                width: auto;
            }
        }
}